<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Huang & Tang</title>
        <link rel="stylesheet" type="text/css" href="style/default.css">
        <script type="text/javascript" src="js/jquery.js">
        </script>
    </head>
    <body>
        {include header.html}
        <div id="main">
            {foreach $list $row}
            <div class="img" style="float:left;">
                <div style="width:160px;height:160px;" align="center">
                    <a href="#"><img src="{echo WEB.str_replace('/0', '/160', $row['image'])}" border="0" /></a>
                </div>
                <div class="img_title" style="width:160px;" id="{$row['id']}">
                    {$row['name']}
                </div>
            </div>{/foreach}
        </div>
        <script type="text/javascript" src="js/jquery.js">
        </script>
        <script type="text/javascript" src="js/javascript.js">
        </script>
        <script>
            $('.img_title').css({
                cursor: 'default'
            }).mouseover(function(){
                $(this).addClass('img_title_selected');
            }).mouseout(function(){
                $(this).removeClass('img_title_selected');
            }).click(addEditInput);
            var _editInputDefaultValue;
            function addEditInput(){
                saveEditInput();
                var text = _editInputDefaultValue = $.trim($(this).text());
                var width = $(this).width();
                $(this).html('<input type="text" name="name" id="_editInput" value="' + text + '" style="width:' + width + 'px"').unbind('click').unbind('mouseover').removeClass('img_title_selected');
                $('#_editInput').blur(saveEditInput).keydown(function(event){
                    switch (event.keyCode) {
                        case 27:
                            cancelEditInput();
                            break;
                        case 13:
                            saveEditInput();
                            break;
                    }
                });
                $('#_editInput')[0].focus();
            }
            
            function saveEditInput(){
                if ($('#_editInput')[0]) {
                    var text = $.trim($('#_editInput').val());
                    if (_editInputDefaultValue != text) {
                        $.post('?a=item&m=edit&type=name', {
                            id: $('#_editInput').parent().attr('id'),
                            value: $('#_editInput').val()
                        }, function(data){
                            if (data == 1) {
                                _editInputDefaultValue = text;
                            }
                            cancelEditInput();
                        });
                    }
                    else {
                        cancelEditInput();
                    }
                }
            }
            
            function cancelEditInput(){
                $('#_editInput').parent().text(_editInputDefaultValue).click(addEditInput).mouseover(function(){
                    $(this).addClass('img_title_selected');
                });
            }
        </script>
    </body>
</html>
